//封装获取id元素函数
function $(id){
    return document.getElementById(id);
};


//封装清空旧数据的函数
function cleeanDom(){
    $("main").innerHTML = `
    <h2>
    <strong>Person</strong>
    <span>Wealth</span>
    </h2>
    `;
    //打开状态
    flag = true;
};

//存当前操作的数据
let nowData = [];
//初始值
let index = 0;
//设置开关（用于显示总金额）
let flag = true;

//给按钮添加点击事件
$("toggle").addEventListener("click",function(){
    // 给body添加显示导航类名
    //document.querySelector("body").classList.toggle("show_nav");
    document.body.classList.toggle("show_nav");
});



//添加账户
$("add-user").addEventListener("click",function(){
    //判断是否到达最大值
    if(index >= dataInfo.length) return;

    //每次添加的数据全部放进nowData数组中保存
    //nowData.push(dataInfo[index++]);
    nowData.push(dataInfo[index]);

    //渲染页面
    let newH2 = document.createElement("h2");
    //``模板字符串 es6新语法
    newH2.innerHTML = `
    <strong>${dataInfo[index].name}</strong>
    <span>$ ${(dataInfo[index].money).toLocaleString()}</span>
    `;
    //判断是否出现总金额
    if(flag){
        $("main").appendChild(newH2);
    }else{
        //???
        //添加节点到总金额元素的前面
        $("main").insertBefore(newH2,$("main").lastElementChild)
    }


    //自增放后面
    index++;
});



//资金翻倍
$("double").addEventListener("click",function(){
    //清空旧数据
    cleeanDom();


    nowData.forEach(function(item){
        //数据翻倍（需要重新赋值，改变原数据）
        item.money = item.money * 2;
         //渲染页面
    let newH2 = document.createElement("h2");
    //``模板字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
    });
});

//查询百万富翁
$("show-millionaire").addEventListener("click",function(){
    //清空旧数据
    cleeanDom();

    //过滤nowData数据，是否存在1000000
    nowData = nowData.filter(function(item){
        return item.money >= 1000000;
    });
    nowData.forEach(function(item){
         //渲染页面
        let newH2 = document.createElement("h2");
        //``模板字符串 es6新语法
        newH2.innerHTML = `
        <strong>${item.name}</strong>
        <span>$ ${(item.money).toLocaleString()}</span>
        `;
        $("main").appendChild(newH2);
    });
});

//财富榜
$("sort").addEventListener("click",function(){
    //清空旧数据
    cleeanDom();

    //对nowData数据的money进行排序（从大到小排序）
    nowData.sort(function(a,b){
        return b.money - a.money;
    });
    nowData.forEach(function(item){
         //渲染页面
        let newH2 = document.createElement("h2");
        //``模板字符串 es6新语法
        newH2.innerHTML = `
        <strong>${item.name}</strong>
        <span>$ ${(item.money).toLocaleString()}</span>
        `;
        $("main").appendChild(newH2);
    });
});

//计算总额
$("calculate").addEventListener("click",function(){

//累加
sum = nowData.reduce(function(total,current,currentIndex,arr){
    return total += current.money;
},0);
     //渲染页面
    let newH2 = document.createElement("h2");
    //``模板字符串 es6新语法
    newH2.innerHTML = `
    <strong>总金额</strong>
    <span>$ ${(sum).toLocaleString()}</span>
    `;
    //判断是否可以继续显示总金额
    if(flag){
        $("main").appendChild(newH2)
        //关闭状态
        flag = false;

    }
    //$("main").appendChild(newH2);
});